<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>kq.1.06Dom元素操纵</title>
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<script src="../kq.1.06.dev.js"></script>
<style>
#dom-tree{}
#dom-tree div{
	border: 1px solid #d00;
	display: flex;
	justify-content: center;
	background-color: rgba(76, 175, 80, 0.1);
	color: #000;
	border-radius: 5px;
	font-weight: bold;
	padding: 15px;
	margin: 15px;
}
#dom-tree div[data-focus]{
		background-color: #F44336;
}
</style>
</head>

<body>
<div>
	<button onClick="btnBefore()">增加before元素</button>
    <button onClick="btnPrepend()">增加prepend元素</button>
    <button onClick="btnAppend()">增加append元素</button>
    <button onClick="btnAfter()">增加after元素</button>
</div>
<div id="dom-tree">
	<div data-format onClick="focusElemenet(this);return;">世界的中心</div>
</div>
</body>
<script>
var dom = $Q('#dom');
console.log('根据标签获取元素列表信息:');
console.log($Q('html'));
function focusElemenet(ele){
	console.log(ele);
	$Q('div[data-format]').removeAttr('data-focus');
	$Q(ele).attr('data-focus','active');	
}
function btnBefore(){
	console.log('btnBefore');
	var ths = $Q('div[data-focus]');
	var ele = ths.clone();
	$Q(ele).removeAttr('data-focus');
	$Q(ths).before(ele);
	$Q('div[data-format]').removeAttr('data-focus');	
}
function btnPrepend(){
	console.log('btnPrepend');
	var ths = $Q('div[data-focus]');
	var ele = ths.clone();
	$Q(ele).removeAttr('data-focus');
	$Q(ths).prepend(ele);
	$Q('div[data-format]').removeAttr('data-focus');	
}
function btnAppend(){
	console.log('btnAppend');
	var ths = $Q('div[data-focus]');
	var ele = ths.clone();
	$Q(ele).removeAttr('data-focus');
	$Q(ths).append(ele);	
	$Q('div[data-format]').removeAttr('data-focus');
}
function btnAfter(){
	console.log('btnAfter');
	var ths = $Q('div[data-focus]');
	var ele = ths.clone();
	$Q(ele).removeAttr('data-focus');
	$Q(ths).after(ele);
	$Q('div[data-format]').removeAttr('data-focus');
}
</script>
</html>
